<template>
	<view class="page" :style="{'height':h+'px'}">
		<c-nav-bar :title="titleHeader" ></c-nav-bar>
		<view class="top">
			<text class="t_title">开票金额</text>
			<view class="t_price">￥<span>{{totalPrice.toFixed(2)}}</span></view>
			<text class="t_kpf">开票方：浙江省嵊泗海岛智慧旅游集团</text>
		</view>
		<view class="tabs">
			<view :class="tabIndex===0?'active':''" @tap="tabIndex=0">企业单位</view>
			<view :class="tabIndex===1?'active':''" @tap="tabIndex=1">个人/非企业</view>
		</view>
		<view class="item">
			<text>发票抬头</text>
			<input v-if="tabIndex===0" type="text" placeholder="请填写企业名称" v-model="firmName" @blur="setFirmName" @confirm="setFirmName">
			<input v-if="tabIndex===1" type="text" placeholder="请填写个人名称" v-model="userName" @blur="setUserName" @confirm="setUserName">
		</view>
		<view class="item i_bt" v-if="tabIndex===0">
			<text>企业税号</text>
			<input type="text" placeholder="请填写纳税人识别号" v-model="dutyNo" @blur="setDutyNo" @confirm="setDutyNo">
		</view>
		<view class="item i_bt" v-if="tabIndex===0">
			<text>更多信息</text>
			<view>选填地址、电话、银行账户等信息 ></view>
		</view>
		<view class="tip">
			选填个人联系方式，其中电子邮箱用于接收电子发票邮件
		</view>
		<view class="item i_bt">
			<text>手机号码</text>
			<input type="tel" placeholder="请填写你的联系电话" v-model="phone" @blur="setPhone" @confirm="setPhone">
		</view>
		<view class="item">
			<text>邮箱地址</text>
			<input type="email" placeholder="请填写你的电子邮箱" v-model="email" @blur="setEmail" @confirm="setEmail">
		</view>
		<view class="set">
			<view class="s_left">
				<text>设置默认抬头</text>
				<text>每次开票会默认填入以上信息</text>
			</view>
			<view class="s_right">
				<u-switch v-model="isDefault" inactiveColor="#EEEEEE" size="46" @change="change"></u-switch>
			</view>
		</view>
		<view class="bottom">
			<view class="btn" @tap="toSubmit">提交</view>
		</view>
		<u-popup :show="show" mode="center" @close="show=false">
			<view class="confirm_info">
				<view class="ci_title">请确认您的发票信息</view>
				<view class="ci_item">
					<text>发票抬头</text>
					<text v-if="tabIndex===0">{{firmName}}</text>
					<text v-if="tabIndex===1">{{userName}}</text>
				</view>
				<view class="ci_item" v-if="email">
					<text>收件邮箱</text>
					<text>{{email}}</text>
				</view>
				<view class="ci_tip">
					*请确认信息无误，电子发票将于开票成功后发送到邮箱中，请注意查收
				</view>
				<view class="ci_btns">
					<view @tap="show=false">取消</view>
					<view @tap="confirm">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleHeader:'开发票',
				h: uni.getSystemInfoSync().windowHeight - 90,
				totalPrice:'',
				invoices:[],
				tabIndex:0,
				firmName:'',
				userName:'',
				dutyNo:'',
				phone:'',
				email:'',
				isDefault:false,
				show:false
			}
		},
		onLoad(option) {
			if(option.invoices){
				this.invoices = JSON.parse(option.invoices);
				// this.totalPrice = this.invoices.reduce((cur,pre)=>cur+pre.paymentMoney,0);
				this.totalPrice = this.invoices.reduce((cur,pre)=>cur+pre.paymentAmount,0);
			} 
		},
		onReady() {
			if(uni.getStorageSync('invoice')){
				this.isDefault = true;
				let invoice_info = JSON.parse(uni.getStorageSync('invoice_info'));
				this.firmName = invoice_info.firmName;
				this.userName = invoice_info.userName;
				this.dutyNo = invoice_info.dutyNo;
				this.phone = invoice_info.phone;
				this.email = invoice_info.email;
			}
		},
		methods: {
			change(e){
				this.isDefault = e;
				if(this.isDefault){
					uni.setStorageSync('invoice',true);
					uni.setStorageSync('invoice_info',JSON.stringify({
						firmName:this.firmName,
						userName:this.userName,
						dutyNo:this.dutyNo,
						phone:this.phone,
						email:this.email
					}))
				}else{
					uni.removeStorageSync('invoice');
					uni.removeStorageSync('invoice_info');
				}
			},
			setFirmName(e){
				this.firmName = e.target.value;
			},
			setUserName(e){
				this.userName = e.target.value;
			},
			setDutyNo(e){
				this.dutyNo = e.target.value;
			},
			setPhone(e){
				this.phone = e.target.value;
			},
			setEmail(e){
				this.email = e.target.value;
			},
			toSubmit(){
				if(this.tabIndex===0&&!this.firmName) return this.$showToast('请填写企业名称');
				if(this.tabIndex===1&&!this.userName) return this.$showToast('请填写个人名称');
				this.show = true;
			},
			confirm(){
				this.show = false;
				uni.navigateTo({
					url:'/pagesIndex/parkingService/invoiceResult'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.page{
		background: #F5F8FA;
		overflow-y: auto;
		padding-bottom: 129rpx;
		box-sizing: border-box;
		padding-top: 130rpx;
		
		.top{
			width: calc(100% - 48rpx);
			margin: 20rpx 24rpx 41rpx;
			background: url(https://i.ringzle.com/file/20231109/c03d590b1f9a47e2a1d8c98a4c80b812.png) no-repeat;
			background-size: 100% 100%;
			padding: 28rpx 24rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			.t_title{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
			.t_price{
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 800;
				color: #FFFFFF;
				margin: 26rpx 0 30rpx;
				span{
					font-size: 56rpx;
				}
			}
			.t_kpf{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
		
		.tabs{
			display: flex;
			align-items: center;
			padding: 0 18rpx 24rpx;
			&>view{
				padding: 0 30rpx 6rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #BCBCBC;
				position: relative;
				&.active{
					font-weight: bold;
					color: #333333;
					&::after{
						content: '';
						width: 62rpx;
						height: 4rpx;
						background: #007A69;
						position: absolute;
						bottom: -6rpx;
						left: 50%;
						margin-left: -31rpx;
					}
				}
			}
		}
		
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 24rpx;
			background: #fff;
			box-sizing: border-box;
			&.i_bt{
				border-top: 1rpx solid rgba(112, 112, 112, .1);
			}
			text{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			input{
				border: none;
				outline: none;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				text-align: right;
				&::placeholder{
					color: #AAAAAA;
				}
			}
			view{
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
			}
		}
		
		.tip{
			width: 100%;
			padding: 27rpx 24rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #AAAAAA;
		}
		
		.set{
			margin-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 27rpx 46rpx 29rpx 24rpx;
			box-sizing: border-box;
			background: #fff;
			.s_left{
				display: flex;
				flex-direction: column;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #333333;
					&:last-child{
						font-size: 24rpx;
						color: #AAAAAA;
						margin-top: 11rpx;
					}
				}
			}
			.s_right{
				width: 89rpx;
				height: 54rpx;
			}
		}
		
		.bottom{
			width: 100%;
			height: 180rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 1;
			background: #fff;
			box-shadow: 0rpx -1rpx 4rpx rgba(0,0,0,0.06);
			.btn{
				width: calc(100% - 60rpx);
				height: 88rpx;
				background: #007A69;
				border-radius: 50rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				letter-spacing: 2rpx;
				margin: 39rpx 30rpx 0;
			}
		}
	
		.confirm_info{
			.ci_title{
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				text-align: center;
				margin: 40rpx 0 5rpx;
			}
			.ci_item{
				margin-top: 36rpx;
				padding: 0 48rpx;
				display: flex;
				flex-direction: column;
				text{
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #9A9A9A;
					&:last-child{
						color: #333333;
						margin-top: 7rpx;
					}
				}
			}
			.ci_tip{
				width: 100%;
				padding: 28rpx 48rpx 53rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
				box-sizing: border-box;
			}
			.ci_btns{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid rgba(112, 112, 112, .1);
				&>view{
					width: calc(50% - 0.5rpx);
					height: 110rpx;
					line-height: 110rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #007A69;
					letter-spacing: 2rpx;
					&:first-child{
						border-right: 0.5rpx solid rgba(112, 112, 112, .1);
					}
					&:last-child{
						border-left: 0.5rpx solid rgba(112, 112, 112, .1);
					}
				}
			}
		}
		
		/deep/.u-popup__content{
			width: calc(100% - 90rpx);
			border-radius: 16rpx;
		}
	}
</style>